<template>
  <div id="app">
    <!-- 头部组件 -->
   
    <HelloWorld>
        <van-icon name="bar-chart-o" @click="show = !show"/>
    </HelloWorld>
    <!-- 弹出框部分 -->
    <!-- 当 v-model在自定义组件标签上写入的时候一定要记得背后的2个操作 -->
    <myModal v-model="show" :styles="{width:'50%'}"   position="left">
        <ul class="ul">
             <li @click="setColor" :style="{background:$store.state.bgColor}">切换颜色</li>
             <li v-bgColor @click="$router.push('/about')">编辑任务</li>
        </ul>
    </myModal>
    <router-view/>
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
import myModal from '@/components/myModal.vue'
import {mapMutations} from 'vuex'
export default {
    data() {
        return {
            show:false,//弹出框的状态
        }
    },
    methods: {
        ...mapMutations(['setColor'])
    },
    components: {
       HelloWorld,
       myModal
    }
}
</script>
<style lang="scss">
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.van-icon-bar-chart-o{
    font-size: 30px!important;
    color:#fff;
}
.ul{
    margin: 30px;
    li{
        width:100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: pink;
        color:#ffff;
        margin: 10px 0;
    }
}
</style>
